<template lang="pug">
  .scene(
    :class="{'no-tab': !showSceneGroup, 'animated bounceInUp': showScene}",
    :style="{bottom: !getBottomMenuLenth && getThemeId == 2 && !showTouch ? '0' : '60px'}",
    v-show="showScene",
    @dblclick="handleToggleScene")
    Scroll.scene-wrap(v-if="getSceneList", :data="getSceneList", :scrollX="true", ref="scrollSceneWrap")
      ul.scene-list(ref="sceneListWrap")
        el-tooltip(
          v-for="(item, index) in getSceneList",
          :key="index",
          effect="dark",
          :content="item.dec",
          :disabled="item.dec ? false : true",
          placement="top")
          li.scene-list-item(
            ref="sceneItem",
            :style="[getComsumerStyle, sceneIndex == index ? getBdColorStyle : '']",
            :class="['item', {'active': sceneIndex == index && !item.isLock}]",
            @click="handleSceneSwitch(item, index, true)"
            @mouseover="checkScrollText(index)",
            @mouseout="cleanScrollText(index)")
            i.iconfont.icon-info(v-if="item.dec", @click.stop='showSceneInfo(item.title, item.dec)')
            .lock(v-if="item.isLock")
              i.iconfont &#xe6f0;
            .img-box
              img(:style="getComsumerStyle", :src="item.full_thumb_url", alt="")
            .text.omit(:style="sceneIndex == index ? getColorStyle : ''")
              p(ref='text') {{item.title}}

    Scroll.group-wrap(v-if="getSceneGroup && showSceneGroup", :data="getSceneGroup", :scrollX="true", ref="scrollGroupWrap")
      .scene-group.scene-group-d(
        ref="sceneGroupWrap")
        .scene-group-item(
          ref="sceneGroupItem",
          v-for="(group, index) in getSceneGroup",
          :key="index",
          :title="group.album",
          @click="handleGroupSwitch(group.groupid, index)")
          el-tooltip(effect="dark", :content="group.album", placement="bottom")
            span.label.omit(
              :class="{'active': sceneGroupIndex == index}",
              :style="sceneGroupIndex == index ? getBgColorStyle : '' ") {{group.album}}
</template>

<script>
import Scroll from 'Comps/Scroll'
import themeMixin from '@/mixins/theme'
import sceneMixin from '@/mixins/scene'

export default {
  name: 'sceneGroup',
  mixins: [themeMixin, sceneMixin],
  components: {
    Scroll
  },
  data() {
    return {
      showTouch: $globalconfig.MODULES.TOUCH_BUTTON,
    }
  }
}
</script>

<style lang="stylus">
@import '../../../assets/styles/scene.styl'

.theme-pc-c
  .scene
    position: absolute
    // bottom: 60px
    left: 0
    right: 0
    z-index: 10

// 旧模板独有样式
.theme-pc-a, .theme-pc-b, .theme-pc-c, .theme-pc-d
  .scene-wrap
    height: 80px

    .scene-list
      height: 80px

      .scene-list-item
        position: relative
        width: 80px
        height: 80px

        & > .lock
          line-height: 80px

  .scene-group
    .scene-group-item
      .label
        width: 80px

.theme-pc
  .scene
    text-align: center

    .scene-wrap
      .scene-list
        .scene-list-item
          position: relative
          border-radius: 6px

          .text
            position: absolute
            background-color: rgba($black, 0.4)
            height: 20px
            line-height: 20px
            box-sizing: border-box

    .scene-group.scene-group-d
      $height = 34px
      height: $height

      .scene-group-item
        height: $height

        .label
          border-radius 20px
          font-size: 12px
          height: $height - 4
          line-height: $height - 4

    // 无分组
    .no-tab
      .scene-group
        height: auto

</style>
